| Conditions | 1 |
| Paths | 1152 |
| Total Lines | 396 |
| Code Lines | 277 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /* |
||
| 37 | }(function($) { |
||
| 38 | // Create the defaults once |
||
| 39 | var defaults = { |
||
| 40 | element: 'body', |
||
| 41 | position: null, |
||
| 42 | type: "info", |
||
| 43 | allow_dismiss: true, |
||
| 44 | allow_duplicates: true, |
||
| 45 | newest_on_top: false, |
||
| 46 | showProgressbar: false, |
||
| 47 | placement: { |
||
| 48 | from: "top", |
||
| 49 | align: "right" |
||
| 50 | }, |
||
| 51 | offset: 20, |
||
| 52 | spacing: 10, |
||
| 53 | z_index: 1060, |
||
| 54 | delay: 5000, |
||
| 55 | timer: 1000, |
||
| 56 | url_target: '_blank', |
||
| 57 | mouse_over: null, |
||
| 58 | animate: { |
||
| 59 | enter: 'animated fadeInDown', |
||
| 60 | exit: 'animated fadeOutUp' |
||
| 61 | }, |
||
| 62 | onShow: null, |
||
| 63 | onShown: null, |
||
| 64 | onClose: null, |
||
| 65 | onClosed: null, |
||
| 66 | onClick: null, |
||
| 67 | icon_type: 'class', |
||
| 68 | template: '<div data-notify="container" class="col-11 col-md-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss"><i class="nc-icon nc-simple-remove"></i></button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>' |
||
| 69 | }; |
||
| 70 | |||
| 71 | String.format = function() { |
||
| 72 | var args = arguments; |
||
| 73 | var str = arguments[0]; |
||
| 74 | return str.replace(/(\{\{\d\}\}|\{\d\})/g, function(str) { |
||
| 75 | if (str.substring(0, 2) === "{{") return str; |
||
| 76 | var num = parseInt(str.match(/\d/)[0]); |
||
| 77 | return args[num + 1]; |
||
| 78 | }); |
||
| 79 | }; |
||
| 80 | |||
| 81 | function isDuplicateNotification(notification) { |
||
| 82 | var isDupe = false; |
||
| 83 | |||
| 84 | $('[data-notify="container"]').each(function(i, el) { |
||
| 85 | var $el = $(el); |
||
| 86 | var title = $el.find('[data-notify="title"]').html().trim(); |
||
| 87 | var message = $el.find('[data-notify="message"]').html().trim(); |
||
| 88 | |||
| 89 | // The input string might be different than the actual parsed HTML string! |
||
| 90 | // (<br> vs <br /> for example) |
||
| 91 | // So we have to force-parse this as HTML here! |
||
| 92 | var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim(); |
||
| 93 | var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim(); |
||
| 94 | var isSameType = $el.hasClass('alert-' + notification.settings.type); |
||
| 95 | |||
| 96 | if (isSameTitle && isSameMsg && isSameType) { |
||
| 97 | //we found the dupe. Set the var and stop checking. |
||
| 98 | isDupe = true; |
||
| 99 | } |
||
| 100 | return !isDupe; |
||
| 101 | }); |
||
| 102 | |||
| 103 | return isDupe; |
||
| 104 | } |
||
| 105 | |||
| 106 | function Notify(element, content, options) { |
||
| 107 | // Setup Content of Notify |
||
| 108 | var contentObj = { |
||
| 109 | content: { |
||
| 110 | message: typeof content === 'object' ? content.message : content, |
||
| 111 | title: content.title ? content.title : '', |
||
| 112 | icon: content.icon ? content.icon : '', |
||
| 113 | url: content.url ? content.url : '#', |
||
| 114 | target: content.target ? content.target : '-' |
||
| 115 | } |
||
| 116 | }; |
||
| 117 | |||
| 118 | options = $.extend(true, {}, contentObj, options); |
||
| 119 | this.settings = $.extend(true, {}, defaults, options); |
||
| 120 | this._defaults = defaults; |
||
| 121 | if (this.settings.content.target === "-") { |
||
| 122 | this.settings.content.target = this.settings.url_target; |
||
| 123 | } |
||
| 124 | this.animations = { |
||
| 125 | start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart', |
||
| 126 | end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend' |
||
| 127 | }; |
||
| 128 | |||
| 129 | if (typeof this.settings.offset === 'number') { |
||
| 130 | this.settings.offset = { |
||
| 131 | x: this.settings.offset, |
||
| 132 | y: this.settings.offset |
||
| 133 | }; |
||
| 134 | } |
||
| 135 | |||
| 136 | //if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing |
||
| 137 | if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) { |
||
| 138 | this.init(); |
||
| 139 | } |
||
| 140 | } |
||
| 141 | |||
| 142 | $.extend(Notify.prototype, { |
||
| 143 | init: function() { |
||
| 144 | var self = this; |
||
| 145 | |||
| 146 | this.buildNotify(); |
||
| 147 | if (this.settings.content.icon) { |
||
| 148 | this.setIcon(); |
||
| 149 | } |
||
| 150 | if (this.settings.content.url != "#") { |
||
| 151 | this.styleURL(); |
||
| 152 | } |
||
| 153 | this.styleDismiss(); |
||
| 154 | this.placement(); |
||
| 155 | this.bind(); |
||
| 156 | |||
| 157 | this.notify = { |
||
| 158 | $ele: this.$ele, |
||
| 159 | update: function(command, update) { |
||
| 160 | var commands = {}; |
||
| 161 | if (typeof command === "string") { |
||
| 162 | commands[command] = update; |
||
| 163 | } else { |
||
| 164 | commands = command; |
||
| 165 | } |
||
| 166 | for (var cmd in commands) { |
||
| 167 | switch (cmd) { |
||
| 168 | case "type": |
||
| 169 | this.$ele.removeClass('alert-' + self.settings.type); |
||
| 170 | this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type); |
||
| 171 | self.settings.type = commands[cmd]; |
||
| 172 | this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]); |
||
| 173 | break; |
||
| 174 | case "icon": |
||
| 175 | var $icon = this.$ele.find('[data-notify="icon"]'); |
||
| 176 | if (self.settings.icon_type.toLowerCase() === 'class') { |
||
| 177 | $icon.removeClass(self.settings.content.icon).addClass(commands[cmd]); |
||
| 178 | } else { |
||
| 179 | if (!$icon.is('img')) { |
||
| 180 | $icon.find('img'); |
||
| 181 | } |
||
| 182 | $icon.attr('src', commands[cmd]); |
||
| 183 | } |
||
| 184 | self.settings.content.icon = commands[command]; |
||
| 185 | break; |
||
| 186 | case "progress": |
||
| 187 | var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100)); |
||
| 188 | this.$ele.data('notify-delay', newDelay); |
||
| 189 | this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%'); |
||
| 190 | break; |
||
| 191 | case "url": |
||
| 192 | this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]); |
||
| 193 | break; |
||
| 194 | case "target": |
||
| 195 | this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]); |
||
| 196 | break; |
||
| 197 | default: |
||
| 198 | this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]); |
||
| 199 | } |
||
| 200 | } |
||
| 201 | var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y); |
||
| 202 | self.reposition(posX); |
||
| 203 | }, |
||
| 204 | close: function() { |
||
| 205 | self.close(); |
||
| 206 | } |
||
| 207 | }; |
||
| 208 | |||
| 209 | }, |
||
| 210 | buildNotify: function() { |
||
| 211 | var content = this.settings.content; |
||
| 212 | this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target)); |
||
| 213 | this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align); |
||
| 214 | if (!this.settings.allow_dismiss) { |
||
| 215 | this.$ele.find('[data-notify="dismiss"]').css('display', 'none'); |
||
| 216 | } |
||
| 217 | if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) { |
||
| 218 | this.$ele.find('[data-notify="progressbar"]').remove(); |
||
| 219 | } |
||
| 220 | }, |
||
| 221 | setIcon: function() { |
||
| 222 | this.$ele.addClass('alert-with-icon'); |
||
| 223 | |||
| 224 | if (this.settings.icon_type.toLowerCase() === 'class') { |
||
| 225 | this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon); |
||
| 226 | } else { |
||
| 227 | if (this.$ele.find('[data-notify="icon"]').is('img')) { |
||
| 228 | this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon); |
||
| 229 | } else { |
||
| 230 | this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />'); |
||
| 231 | } |
||
| 232 | } |
||
| 233 | }, |
||
| 234 | styleDismiss: function() { |
||
| 235 | this.$ele.find('[data-notify="dismiss"]').css({ |
||
| 236 | position: 'absolute', |
||
| 237 | right: '10px', |
||
| 238 | top: '50%', |
||
| 239 | marginTop: '-13px', |
||
| 240 | zIndex: this.settings.z_index + 2 |
||
| 241 | }); |
||
| 242 | }, |
||
| 243 | styleURL: function() { |
||
| 244 | this.$ele.find('[data-notify="url"]').css({ |
||
| 245 | backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', |
||
| 246 | height: '100%', |
||
| 247 | left: 0, |
||
| 248 | position: 'absolute', |
||
| 249 | top: 0, |
||
| 250 | width: '100%', |
||
| 251 | zIndex: this.settings.z_index + 1 |
||
| 252 | }); |
||
| 253 | }, |
||
| 254 | placement: function() { |
||
| 255 | var self = this, |
||
| 256 | offsetAmt = this.settings.offset.y, |
||
| 257 | css = { |
||
| 258 | display: 'inline-block', |
||
| 259 | margin: '0px auto', |
||
| 260 | position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'), |
||
| 261 | transition: 'all .5s ease-in-out', |
||
| 262 | zIndex: this.settings.z_index |
||
| 263 | }, |
||
| 264 | hasAnimation = false, |
||
| 265 | settings = this.settings; |
||
| 266 | |||
| 267 | $('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function() { |
||
| 268 | offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing)); |
||
| 269 | }); |
||
| 270 | if (this.settings.newest_on_top === true) { |
||
| 271 | offsetAmt = this.settings.offset.y; |
||
| 272 | } |
||
| 273 | css[this.settings.placement.from] = offsetAmt + 'px'; |
||
| 274 | |||
| 275 | switch (this.settings.placement.align) { |
||
| 276 | case "left": |
||
| 277 | case "right": |
||
| 278 | css[this.settings.placement.align] = this.settings.offset.x + 'px'; |
||
| 279 | break; |
||
| 280 | case "center": |
||
| 281 | css.left = 0; |
||
| 282 | css.right = 0; |
||
| 283 | break; |
||
| 284 | } |
||
| 285 | this.$ele.css(css).addClass(this.settings.animate.enter); |
||
| 286 | $.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function(index, prefix) { |
||
| 287 | self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1; |
||
| 288 | }); |
||
| 289 | |||
| 290 | $(this.settings.element).append(this.$ele); |
||
| 291 | |||
| 292 | if (this.settings.newest_on_top === true) { |
||
| 293 | offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight(); |
||
| 294 | this.reposition(offsetAmt); |
||
| 295 | } |
||
| 296 | |||
| 297 | if ($.isFunction(self.settings.onShow)) { |
||
| 298 | self.settings.onShow.call(this.$ele); |
||
| 299 | } |
||
| 300 | |||
| 301 | this.$ele.one(this.animations.start, function() { |
||
| 302 | hasAnimation = true; |
||
| 303 | }).one(this.animations.end, function() { |
||
| 304 | self.$ele.removeClass(self.settings.animate.enter); |
||
| 305 | if ($.isFunction(self.settings.onShown)) { |
||
| 306 | self.settings.onShown.call(this); |
||
| 307 | } |
||
| 308 | }); |
||
| 309 | |||
| 310 | setTimeout(function() { |
||
| 311 | if (!hasAnimation) { |
||
| 312 | if ($.isFunction(self.settings.onShown)) { |
||
| 313 | self.settings.onShown.call(this); |
||
| 314 | } |
||
| 315 | } |
||
| 316 | }, 600); |
||
| 317 | }, |
||
| 318 | bind: function() { |
||
| 319 | var self = this; |
||
| 320 | |||
| 321 | this.$ele.find('[data-notify="dismiss"]').on('click', function() { |
||
| 322 | self.close(); |
||
| 323 | }); |
||
| 324 | |||
| 325 | if ($.isFunction(self.settings.onClick)) { |
||
| 326 | this.$ele.on('click', function(event) { |
||
| 327 | if (event.target != self.$ele.find('[data-notify="dismiss"]')[0]) { |
||
| 328 | self.settings.onClick.call(this, event); |
||
| 329 | } |
||
| 330 | }); |
||
| 331 | } |
||
| 332 | |||
| 333 | this.$ele.mouseover(function() { |
||
| 334 | $(this).data('data-hover', "true"); |
||
| 335 | }).mouseout(function() { |
||
| 336 | $(this).data('data-hover', "false"); |
||
| 337 | }); |
||
| 338 | this.$ele.data('data-hover', "false"); |
||
| 339 | |||
| 340 | if (this.settings.delay > 0) { |
||
| 341 | self.$ele.data('notify-delay', self.settings.delay); |
||
| 342 | var timer = setInterval(function() { |
||
| 343 | var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer; |
||
| 344 | if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") { |
||
| 345 | var percent = ((self.settings.delay - delay) / self.settings.delay) * 100; |
||
| 346 | self.$ele.data('notify-delay', delay); |
||
| 347 | self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%'); |
||
| 348 | } |
||
| 349 | if (delay <= -(self.settings.timer)) { |
||
| 350 | clearInterval(timer); |
||
| 351 | self.close(); |
||
| 352 | } |
||
| 353 | }, self.settings.timer); |
||
| 354 | } |
||
| 355 | }, |
||
| 356 | close: function() { |
||
| 357 | var self = this, |
||
| 358 | posX = parseInt(this.$ele.css(this.settings.placement.from)), |
||
| 359 | hasAnimation = false; |
||
| 360 | |||
| 361 | this.$ele.attr('data-closing', 'true').addClass(this.settings.animate.exit); |
||
| 362 | self.reposition(posX); |
||
| 363 | |||
| 364 | if ($.isFunction(self.settings.onClose)) { |
||
| 365 | self.settings.onClose.call(this.$ele); |
||
| 366 | } |
||
| 367 | |||
| 368 | this.$ele.one(this.animations.start, function() { |
||
| 369 | hasAnimation = true; |
||
| 370 | }).one(this.animations.end, function() { |
||
| 371 | $(this).remove(); |
||
| 372 | if ($.isFunction(self.settings.onClosed)) { |
||
| 373 | self.settings.onClosed.call(this); |
||
| 374 | } |
||
| 375 | }); |
||
| 376 | |||
| 377 | setTimeout(function() { |
||
| 378 | if (!hasAnimation) { |
||
| 379 | self.$ele.remove(); |
||
| 380 | if (self.settings.onClosed) { |
||
| 381 | self.settings.onClosed(self.$ele); |
||
| 382 | } |
||
| 383 | } |
||
| 384 | }, 600); |
||
| 385 | }, |
||
| 386 | reposition: function(posX) { |
||
| 387 | var self = this, |
||
| 388 | notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])', |
||
| 389 | $elements = this.$ele.nextAll(notifies); |
||
| 390 | if (this.settings.newest_on_top === true) { |
||
| 391 | $elements = this.$ele.prevAll(notifies); |
||
| 392 | } |
||
| 393 | $elements.each(function() { |
||
| 394 | $(this).css(self.settings.placement.from, posX); |
||
| 395 | posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight(); |
||
| 396 | }); |
||
| 397 | } |
||
| 398 | }); |
||
| 399 | |||
| 400 | $.notify = function(content, options) { |
||
| 401 | var plugin = new Notify(this, content, options); |
||
| 402 | return plugin.notify; |
||
| 403 | }; |
||
| 404 | $.notifyDefaults = function(options) { |
||
| 405 | defaults = $.extend(true, {}, defaults, options); |
||
| 406 | return defaults; |
||
| 407 | }; |
||
| 408 | |||
| 409 | $.notifyClose = function(selector) { |
||
| 410 | |||
| 411 | if (typeof selector === "undefined" || selector === "all") { |
||
| 412 | $('[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||
| 413 | } else if (selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger') { |
||
| 414 | $('.alert-' + selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||
| 415 | } else if (selector) { |
||
| 416 | $(selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||
| 417 | } else { |
||
| 418 | $('[data-notify-position="' + selector + '"]').find('[data-notify="dismiss"]').trigger('click'); |
||
| 419 | } |
||
| 420 | }; |
||
| 421 | |||
| 422 | $.notifyCloseExcept = function(selector) { |
||
| 423 | |||
| 424 | if (selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger') { |
||
| 425 | $('[data-notify]').not('.alert-' + selector).find('[data-notify="dismiss"]').trigger('click'); |
||
| 426 | } else { |
||
| 427 | $('[data-notify]').not(selector).find('[data-notify="dismiss"]').trigger('click'); |
||
| 428 | } |
||
| 429 | }; |
||
| 430 | |||
| 431 | |||
| 432 | })); |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.